* {
  font-family: "Microsoft YaHei";
}

.catalog-box {
  display: inline-block;
  /* position: fixed; */
  top: 5%;
  right: 10px;
  height: 90vh;
  /* width: 300px; */
  flex:1;
  overflow-y: scroll;
  background-color: rgb(244, 244, 244);
  box-shadow: 2px 2px 5px #ddd;
}

.catalog-box li {
  line-height: 25px;
}

.sticky-title {
  position: sticky;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 24px;
  letter-spacing: 3px;
  font-weight: bold;
  width: 700px;
  margin: 0 auto;
  z-index: 9999;
}

h2 {
  margin: 0;
  position: sticky;
  top: 0;
  /* background-color: lightcoral; */
  background: linear-gradient(to right, rgb(240, 163, 163), #fff 30%);
  height: 40px;
  line-height: 40px;
  /* display: inline-block; */
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}

h2::before {
  content: "# ";
}

pre, strong {
  font-size: 1.2rem;
  font-family: 'KaiTi';
  background-color: rgba(0, 0, 0, 0.9);
  color: coral;
  /* background: url('bgtile.png'); */
}

pre a{
  color: rgb(8, 182, 182);
  font-family: 'KaiTi';
  font-size: 1.2rem;
  /* background-color: #fff; */
}

/* **************************************************************** */

.content-container {
  /* 指定容器内部元素为flex布局 */
  display: flex;
  /* 设置主轴方向，row（横向从左到右） | row-reverse | column | column-reverse */
  flex-direction: row;
  /* 决定容器内项目是否可换行 nowrap | wrap | wrap-reverse */
  flex-wrap: nowrap;
  /* 定义了项目在主轴的对齐方式 flex-start | flex-end | center | space-between | space-around */
  justify-content: space-around;
  /* 定义了项目在交叉轴上的对齐方式 flex-start | flex-end | center | baseline | stretch */
  align-items: flex-start;
}

.chapter-box {
  height: 90vh;
  overflow-y: scroll;
  flex:4;
}